<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="组织名称">
              <j-input placeholder="" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="组织编码">
              <j-input placeholder="" v-model="queryParam.tenantCode"></j-input>
            </a-form-item>
          </a-col>
          <!--<a-col :md="4" :sm="8">
            <a-form-item label="状态">
              <j-dict-select-tag v-model="queryParam.status" dictCode="tenant_status"></j-dict-select-tag>
            </a-form-item>
          </a-col>-->
          <a-col :md="8" :sm="8">
            <a-button type="primary" icon="search" @click="searchQuery">搜索</a-button>
            <a-button type="primary" @click="handleAdd" icon="plus" style="margin-left: 8px" v-has="'tenant:add'">新增</a-button>
            <a-button type="primary" @click="viewGuide" style="margin-left: 8px" v-has="'tenant:guide'">操作流程</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="status" slot-scope="text, record">
          <a-switch
            checked-children="开启"
            un-checked-children="禁用"
            :checked="record.status === 1"
            @click="statusEdit(record)"/>
        </span>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" :disabled="isDisabledAuth('tenant:edit')">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item v-has="'tenant:user'">
                <a @click="tenantUser(record)">成员</a>
              </a-menu-item>
              <a-menu-item v-has="'tenant:delete'">
                <a-popconfirm title="确定删除吗?" @confirm="() =>doDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item v-if="is_super_tenant || login_tenant!=record.id" v-has="'tenant:saveApp'">
                <a @click="editAppPermission(record)">配置应用</a>
              </a-menu-item>
              <a-menu-item v-else>
                <a @click="viewAppPermission(record)">应用详情</a>
              </a-menu-item>
              <a-menu-item v-has="'tenant:project'">
                <a @click="saveTenantProject(record)">关联项目</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>

    <tenant-modal ref="modalForm" @ok="modalFormOk"></tenant-modal>
    <tenant-app-modal ref="appModalForm"></tenant-app-modal>
    <tenant-app-detail-modal ref="appModalDetailForm"></tenant-app-detail-modal>
  </a-card>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import TenantModal from './modules/TenantModal.vue'
  import TenantAppModal from './app/TenantAppModal.vue'
  import TenantAppDetailModal from './app/TenantAppDetailModal.vue'
  import TenantProject from './project/TenantProject.vue'
  import TenantUser from './user/TenantUser.vue'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import { api, editTenant } from './service'
  import { routerUri } from '@/api/common.js'
  import { TENANT_ID, IS_SUPER_TENANT } from '@/store/mutation-types';
  import Vue from 'vue';
  import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'

  // const isSuperTenant = Vue.ls.get(IS_SUPER_TENANT);
  // const loginTenant = Vue.ls.get(TENANT_ID);

  export default {
    name: 'TenantList',
    mixins: [JeecgListMixin, DisabledAuthFilterMixin],
    components: {
      TenantModal,
      TenantAppModal,
      TenantAppDetailModal,
      TenantProject,
      TenantUser,
      JDictSelectTag
    },
    data () {
      let that = this;
      return {
        description: '组织管理页面',
        is_super_tenant: Vue.ls.get(IS_SUPER_TENANT),
        login_tenant: Vue.ls.get(TENANT_ID),
        // 表头
        columns: [
          {
            title: '#',
            align: 'center',
            dataIndex: 'rowIndex',
            width: 60,
            customRender: function (t, r, index) {
              return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
            }
          }, {
            title: '组织名称',
            dataIndex: 'name'
          }, {
            title: '组织简称',
            dataIndex: 'shortName'
          }, {
            title: '组织编码',
            dataIndex: 'tenantCode'
          }, {
            title: '组织类型',
            dataIndex: 'typeName'
          }, {
            title: '组织地址',
            dataIndex: 'address',
            width: 250
          },
          {
            title: '父组织',
            dataIndex: 'parentTenantName'
          },
          // {
          //   title: '状态',
          //   align: 'center',
          //   dataIndex: 'status',
          //   scopedSlots: { customRender: 'status' }
          // },
          {
            title: '超管账号',
            dataIndex: 'admin'
          }, {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 160,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: api.list(Vue.ls.get(TENANT_ID)),
          delete: ''
        }
      }
    },
    methods: {
      statusEdit(formData) {
        let that = this
        if (formData.status === 1) {
          formData.status = 0
        } else {
          formData.status = 1
        }
        editTenant(formData).then((res) => {
          if (res.success) {
            that.$message.success('操作成功')
            that.$emit('ok')
          } else {
            if (formData.status === 1) {
              formData.status = 0
            } else {
              formData.status = 1
            }
            that.$message.warning(res.message)
          }
        })
      },
      editAppPermission(record) {
        this.$refs.appModalForm.edit(record);
      },
      viewAppPermission(record) {
        this.$refs.appModalDetailForm.edit(record);
      },
      saveTenantProject(record) {
        this.$router.push({ name: routerUri.tenantProject, params: { tenantId: record.id } })
      },
      tenantUser(record) {
        this.$router.push({ name: routerUri.tenantUser, params: { tenantId: record.id } })
      },
      viewGuide() {
        this.$router.push({ name: routerUri.tenantGuide })
      },
      doDelete(id) {
        this.url.delete = api.delete(id);
        this.handleDelete(id);
      }

    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';
</style>
